<template>
    <div>
        <div class="activity-right">
            <h3>Banner列表</h3>
            <el-input style="width:25%;" class='input' @keyup.enter.native="getBannerList(page)" prefix-icon="el-icon-search" clearable v-model="name"  placeholder="请输入查询条件"></el-input>
            <el-button type="primary" @click.enter="getBannerList(page)" icon="el-icon-search">搜索</el-button>
            <el-button class='right' style="margin-bottom:20px;" type="primary" @click="addBanner"> 添加Banner </el-button>
            <el-table class="table-common" :data="tableData" element-loading-text="拼命加载中" style="width: 100%">
                <el-table-column prop="url" label="Banner图片" width="180">
                    <template slot-scope="scope">
                        <img :src="scope.row.url" alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="Banner名称" width="180">
                </el-table-column>
                <el-table-column prop="sort" label="Banner排序" width="120">
                </el-table-column>
                <el-table-column prop="platform" label="平台类型" width="120">
                    <template slot-scope="scope">{{scope.row.platform === 'ALL' ? '全部' : (scope.row.platform === 'JSAPI' ? '小程序': 'APP')}}</template>
                </el-table-column>
                <el-table-column prop="platform" label="banner类型" width="120">
                    <template slot-scope="scope">{{scope.row.type === 0 ? 'banner' : '广告'}}</template>
                </el-table-column>
                <el-table-column prop="status" label="Banner状态" width="120">
                    <template slot-scope="scope">{{scope.row.status==0 ? '无效' : '有效'}}</template>
                </el-table-column>
                <el-table-column prop="action" label="Banner跳转" width="120">
                    <template slot-scope="scope">{{scope.row.action==0 ? '无跳转' : '有跳转'}}</template>
                </el-table-column>
                <el-table-column prop="link" label="Banner链接" width="180">
                    <template slot-scope="scope">{{scope.row.link != null ? scope.row.link : '无链接'}}</template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editBanner(scope.row)" size="small">编辑</el-button>
                        <el-button type="text" @click="deleteBanner(scope.row.id)" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <section class="pagination" >
                <el-pagination background layout="total,prev, pager, next,jumper"
                    :page-count="Math.ceil(total/10)" :total="total" 
                    :page-size="10" :current-page.sync="page" 
                    @current-change="handlePageChange">
                </el-pagination>
            </section> -->
        </div>
    </div>
</template>

<script>
import { getBannerList, delBanner } from "../../data/postData";
export default {
    mounted() {
        this.getBannerList();
    },
    data() {
        return {
            user: JSON.parse(sessionStorage.getItem("ddaigoUser")),
            tableData: null,
            total: 0,
            size: "10",
            page: 1,
            form: {
                status: ""
            },
            name: ''
        };
    },
    methods: {
        //获取banner列表
        getBannerList(page) {
            var params = {
                data: {
                    name: this.name
                }
            };
            this.$fetch.post(getBannerList, params).then(res => {
                this.tableData = res.data;
            }).catch(err => {
                this.$message.error(err.message)
            });
        },
        addBanner() {
            this.$router.push({ path: "/addBanner" });
        },
        editBanner(scope) {
            this.$router.push({ path: "/editBanner/" + scope.id });
        },
        //删除轮播
        deleteBanner(id) {
            let params = {
                data: {
                    id: "" + id
                }
            };
            this.$confirm("确认删除？").then(_ => {
                this.$fetch
                    .post(delBanner, params)
                    .then(res => {
                        this.$messag.success(res.message)
                        setTimeout(() => {
                            this.getBannerList();
                        }, 1500);
                    })
                    .catch(err => {
                        this.$message.error(error.message)
                    });
            });
        },
         handlePageChange(page) {
            this.page = page;
            this.getActivityList(this.page);
            // this.$store.dispatch("saveBrandListPage", this.page);
        },
        // pagePrev() {
        //     this.page--;
        //     this.getActivityList(this.page);
        //     localStorage.setItem("Page", JSON.stringify({ page: this.page }));
        //     localStorage.setItem(
        //         "activityStatus",
        //         JSON.stringify({ status: this.form.status })
        //     );
        // },
        // pageNext() {
        //     this.page++;
        //     this.getActivityList(this.page);
        //     localStorage.setItem("Page", JSON.stringify({ page: this.page }));
        //     localStorage.setItem(
        //         "activityStatus",
        //         JSON.stringify({ status: this.form.status })
        //     );
        // }
    }
};
</script>

<style scoped lang="less">
.activity-right {
    width: calc(~"100% - 250px");
    margin-top: 66px;
    margin-left: 230px;
    float: left;
    h3 {
        margin: 20px 0;
    }
    .select_type {
        margin-bottom: 20px;
        position: relative;
        span {
            margin-right: 10px;
        }
        button {
            position: absolute;
            right: 0;
            top: 0;
        }
    }
}
.el-table__body-wrapper {
    margin-top: 15px;
    img {
        width: 100%;
    }
    a {
        color: #409eff;
    }
}
.right {
    float: right;
    z-index: 999999999;
}
.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
</style>